<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Date routines - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Date routines</a></li>
                    <li class="toc-entry"><a href="#_dateformat_format">Date to string</a></li>
                    <li class="toc-entry"><a href="#_dateformat_to_date">String to date</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Date routines</h1>
                <p class="text-leader">
                    Metro 4 contains function to format date and time and output formatted string and create date from string by mask.
                </p>

                <!-- ads-html -->

                <h3 id="_dateformat_function">Date to string</h3>
                <p>
                    You can format date and time value to formatted string with special function.
                    This function is implemented as an extension of the Date object with name <code>format</code>.
                    This function has two parameters:
                </p>
                <ul>
                    <li><strong>format</strong> - format for output.</li>
                    <li><strong>locale</strong> - language for output.</li>
                </ul>
                <p class="remark info">
                    You can read more about locales in <a href="i18n.html">this article</a>.
                </p>
                <pre><code>
                    Date.prototype.format = function(format, locale){...}

                    var date = new Date();
                    console.log(date.format("%d-%m-%Y"));
                </code></pre>

                <h5 id="_dateformat_patterns">Patterns</h5>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Pattern</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>%a</code></td>
                        <td>The abbreviated name of the day of the week according to the locale.</td>
                    </tr>
                    <tr>
                        <td><code>%A</code></td>
                        <td>The full name of the day of the week according to the locale.</td>
                    </tr>
                    <tr>
                        <td><code>%b</code></td>
                        <td>The abbreviated month name according to the locale.</td>
                    </tr>
                    <tr>
                        <td><code>%B</code></td>
                        <td>The full name of the month according to the locale.</td>
                    </tr>
                    <tr>
                        <td><code>%c</code></td>
                        <td>Preferred date and time (UTC) representation for the locale.</td>
                    </tr>
                    <tr>
                        <td><code>%C</code></td>
                        <td>Century number (year/100) as a 2-digit integer.</td>
                    </tr>
                    <tr>
                        <td><code>%d</code></td>
                        <td>Day of the month as a decimal number (range 01 to 31).</td>
                    </tr>
                    <tr>
                        <td><code>%e</code></td>
                        <td>Day of the month as a decimal number (range 1 to 31).</td>
                    </tr>
                    <tr>
                        <td><code>%F</code></td>
                        <td>ISO 8601 date format (equivalent to %Y-%m-%d).</td>
                    </tr>
                    <tr>
                        <td><code>%G</code></td>
                        <td>ISO 8601 week-based year with century as a decimal number. The 4-digit year corresponds to the ISO week number (see %V). This has the same format and value as %Y, except that if the ISO week number belongs to the previous or next year, that year is used instead.</td>
                    </tr>
                    <tr>
                        <td><code>%g</code></td>
                        <td>Like %G, but without century, that is, with a 2-digit year (00-99).</td>
                    </tr>
                    <tr>
                        <td><code>%H</code></td>
                        <td>Hour as a decimal number using a 24-hour clock (range 00 to 23). See also %k.</td>
                    </tr>
                    <tr>
                        <td><code>%I</code></td>
                        <td>Hour as a decimal number using a 12-hour clock (range 01 to 12). See also %l.</td>
                    </tr>
                    <tr>
                        <td><code>%j</code></td>
                        <td>Day of the year as a decimal number (range 001 to 366).</td>
                    </tr>
                    <tr>
                        <td><code>%k</code></td>
                        <td>Hour as a decimal number using a 24-hour clock (range 0 to 23). See also %H.</td>
                    </tr>
                    <tr>
                        <td><code>%l</code></td>
                        <td>Hour as a decimal number using a 12-hour clock (range 1 to 12). See also %I.</td>
                    </tr>
                    <tr>
                        <td><code>%m</code></td>
                        <td>Month as a decimal number (range 01 to 12).</td>
                    </tr>
                    <tr>
                        <td><code>%M</code></td>
                        <td>Minute as a decimal number (range 00 to 59).</td>
                    </tr>
                    <tr>
                        <td><code>%p</code></td>
                        <td>Either "AM" or "PM" according to the given time value. Noon is treated as "PM" and midnight as "AM".</td>
                    </tr>
                    <tr>
                        <td><code>%P</code></td>
                        <td>Like %p but in lowercase ("am" or "pm").</td>
                    </tr>
                    <tr>
                        <td><code>%s</code></td>
                        <td>Number of seconds since the Epoch, 1970-01-01 00:00:00 +0000 (UTC).</td>
                    </tr>
                    <tr>
                        <td><code>%S</code></td>
                        <td>Second as a decimal number (range 00 to 59).</td>
                    </tr>
                    <tr>
                        <td><code>%u</code></td>
                        <td>Day of the week as a decimal (range 1 to 7), Monday being 1. See also %w.</td>
                    </tr>
                    <tr>
                        <td><code>%V</code></td>
                        <td>ISO 8601 week number of the year as a decimal number (range 01 to 53), where week 1 is the first week that has at least 4 days in the new year (that is, the first Thursday).</td>
                    </tr>
                    <tr>
                        <td><code>%w</code></td>
                        <td>Day of the week as a decimal (range 0 to 6), Sunday being 0. See also %u.</td>
                    </tr>
                    <tr>
                        <td><code>%x</code></td>
                        <td>Preferred date representation for the locale without the time.</td>
                    </tr>
                    <tr>
                        <td><code>%X</code></td>
                        <td>Preferred time representation for the locale without the date.</td>
                    </tr>
                    <tr>
                        <td><code>%y</code></td>
                        <td>Year as a decimal number without a century (range 00 to 99).</td>
                    </tr>
                    <tr>
                        <td><code>%Y</code></td>
                        <td>Year as a decimal number including the century.</td>
                    </tr>
                    <tr>
                        <td><code>%z</code></td>
                        <td>The +hhmm or -hhmm numeric timezone (that is, the hour and minute offset from UTC).</td>
                    </tr>
                    <tr>
                        <td><code>%Z</code></td>
                        <td>Timezone name or abbreviation.</td>
                    </tr>
                    </tbody>
                </table>

                <!-- ads-html -->

                <h3 id="_dateformat_to_date">String to date</h3>
                <p>
                    You can convert <code>string</code> to <code>date</code> by <code>mask</code> with special string extension function <code>toDate(mask)</code>.
                </p>
                <pre><code>
                    String.prototype.toDate = function(mask){...}

                    "1972-12-21 04:30:00".toDate("yyyy-mm-dd hh:ii:ss");
                    "21-12-1972".toDate("dd-mm-yyyy");
                    "21-12-1972".toDate("%d-%m-%y");
                </code></pre>
                <h5 id="_dateformat_patterns_2">Patterns</h5>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Pattern</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>%d, dd</code></td>
                        <td>Day definition.</td>
                    </tr>
                    <tr>
                        <td><code>%m, mm</code></td>
                        <td>Month definition.</td>
                    </tr>
                    <tr>
                        <td><code>%y, yy, yyyy</code></td>
                        <td>Year definition.</td>
                    </tr>
                    <tr>
                        <td><code>%h, hh</code></td>
                        <td>Hours definition.</td>
                    </tr>
                    <tr>
                        <td><code>%i, ii, mi</code></td>
                        <td>Minutes definition.</td>
                    </tr>
                    <tr>
                        <td><code>%s, ss</code></td>
                        <td>Seconds definition.</td>
                    </tr>
                    </tbody>
                </table>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>